<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Restaurant example</title>
	<link rel="stylesheet" href="mystyle.css">
	<script type="text/javascript" >
		function handleClick1(){
			var total = document.getElementById('total').value;
			
			if(document.getElementById('ocluoc').checked){
				total = parseInt(total) + 10;
			}
			else{
				total = parseInt(total) - 10;
			}
			document.getElementById('total').value = total;
		}
		function handleClick2(){
			var total = document.getElementById('total').value;
			if(document.getElementById('ocbungchuoidau').checked){
				total = parseInt(total) + 11;
			}
			else{
				total = parseInt(total) - 11;
			}
			document.getElementById('total').value = total;		
		}
		function handleClick3(){
			var total = document.getElementById('total').value;
			if(document.getElementById('raumuong').checked){
				total = parseInt(total) + 12;
			}
			else{
				total = parseInt(total) - 12;
			}		
			document.getElementById('total').value = total;
		}
		function handleClick4(){
			var total = document.getElementById('total').value;
			if(document.getElementById('bunca').checked){
				total = parseInt(total) + 13;
			}
			else{
				total = parseInt(total) - 13;
			}
			document.getElementById('total').value = total;
		}
	</script>
</head>
	
<body>
	<div id="header">
	<h1>Welcome to Vietnamese Cuisines</h1>	
	</div>
	<div id="gutter"></div>
	<div id="col1">
	
	<table summary="" >
		<tr><td>Menu</td></tr>
		<tr><td>Special offers</td></tr>
		<tr><td> Online reservation</td></tr>
		<tr><td>Opening hours</td></tr>
		<tr><td align="middle"><img style="width: 125%" src="costume.jpg" alt="costume"></td>></tr>
	</table>	
	</div>	
	<form name="choice" method="GET" action="mn.php">
	<div id="col2">
			<img style="width: 100%" src="ocluoc.jpeg" alt="oc luoc"> 
			<br> 
			<p> Price: $10
			<input type="checkbox" name="ocluoc" id="ocluoc" value="ocluoc" onclick="handleClick1()">			
			</p>
			<img style="width: 100%" src="ocbungchuoidau.jpg" alt="oc bung chuoi dau">
			<p> Price: $11
			<input type="checkbox" name="ocbungchuoidau" id="ocbungchuoidau" value="ocbungchuoidau" onclick="handleClick2()">			
			</p>
	</div>
	
	<div id="gutter"></div>
	
	<div id="col3">
			<img style="width: 100%" src="raumuong.jpg" alt="rau muong"> 
			<br>
			<p> Price: $12
			<input type="checkbox" name="raumuong" id="raumuong" value="raumuong" onclick="handleClick3()">
			</p>
		
			<img style="width: 100%" src="bunca.jpeg" alt="bun ca">
			<p> Price: $13
			<input type="checkbox" name="bunca" id="bunca" value="bunca" onclick="handleClick4()">			
			</p>
	</div>
	
	<div id="footer">
			<label>Total: </label>
			<input type="text" name="total" id="total" size="10" value="0" readonly="true">
			<input type="submit" name="submit" value="Submit">
	</div>
	
	</form>
	
</body>
</html>